<template>
	<view class="cards_body">
		<u-navbar back-text="选择优惠券" :border-bottom="false" :back-text-style="textStyle" back-icon-color="#000000"
			style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<mescroll-body top="0" :down="downOption" :up="upOption" :height="comHeight" ref="mescrollRef"
			@init="mescrollInit" @down="downCallback">
			<view style="width: 92%;margin: auto;padding-top: 20rpx;">
				<view style="" v-if="list.availableList.length > 0">
					<view style="color: #272755;font-size: 30rpx;font-weight: bold;padding-bottom: 24rpx;">可用优惠券</view>
					<view v-for="(tet, ind) in list.availableList" :key="ind" style="margin-bottom:28rpx ;">
						<view class="card_bj" style="position: relative;" @tap.stop="tet.isOpenMember == '1'?goMember():user_sy(tet)">
							<image style="height:176rpx ;width: 100%;"
								:src="tet.counponsGenre == 0 ? backImg.gimg : vipImg"></image>
							<view style="position: absolute;left: 0;top: 0;width: 100%;">
								<view style="width: 100%;margin: auto;overflow: hidden;">
									<!-- 满减卷 -->
									<view style="width:30% ;float: left;text-align: center;"
										v-if="tet.counponsType == 0">
										<view :style="{color: tet.counponsGenre == 0 ? '#fff' : '#F9D0A4' }"
											style="font-size:56rpx ;font-weight: bold;padding-top: 28rpx;">
											<text style="font-size: 28rpx;">￥</text>
											{{ tet.price }}
										</view>
										<view :style="{color: tet.counponsGenre == 0 ? '#fff' : '#F9D0A4' }"
											style="font-size:24rpx ;line-height: 48rpx;">满{{ tet.limitation }}元可用</view>
									</view>
									<!-- 折扣卷 -->
									<view style="width:30% ;float: left;text-align: center;" v-else>
										<view :style="{color: tet.counponsGenre == 0 ? '#fff' : '#F9D0A4' }"
											style="font-size:56rpx ;font-weight: bold;padding-top: 28rpx;">
											{{tet.fmtDiscountStr}}
										</view>
										<view :style="{color: tet.counponsGenre == 0 ? '#fff' : '#F9D0A4' }"
											style="font-size:24rpx ;line-height: 48rpx;">无门槛使用</view>
									</view>
									<!-- 已领取 -->
									<view style="width: 70%;float: right;">
										<view style="width: 93%;margin: auto;display: flex;">
											<view style="width: 90%;">
												<view class="card_text"
													:style="{color: tet.counponsGenre == 0 ? '#333333' : '#F9D0A4' }"
													style="font-weight: bold; font-size:30rpx ;padding: 36rpx 16rpx 12rpx 20rpx;">
													{{tet.fmtName}}</view>
												<view class="card_text" :style="{ 'line-height': tet.limitType!== 1 && tet.limitType !== 3 ? '86rpx' : '48rpx',
												 color:tet.counponsGenre == 0  ? '#6F6F6F' : '#FFFFFF'
												 }" style="color: #6F6F6F; font-size:22rpx ;padding: 0rpx 0rpx 0rpx 20rpx;">
													有效期至{{ tet.endDatetime }}
												</view>
												<view class="card_text"
													:style="{color: tet.counponsGenre == 0 ? '#979797' : '#FFFFFF' }"
													style="padding: 0rpx 0rpx 0rpx 20rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #979797;font-size: 20rpx;line-height: 34rpx;">
													{{tet.activityType == 1 || tet.activityType == 3 ? '#仅限'+ tet.activityName+'活动商家使用#':''}}
												</view>
											</view>
											<view :style="{color: tet.counponsGenre == 0 ? '#FF7D55' : '#FFFFFF' }"
												style=" text-align: center;width: 5%;margin-top: 30rpx;">去<br />使<br />用
											</view>
										</view>
									</view>

								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="" v-if="list.disabledList.length > 0">
					<view style="color: #272755;font-size: 30rpx;font-weight: bold;padding-bottom: 24rpx;">不可用优惠券</view>
					<view class="css_mc" v-for="(tet, ind) in list.disabledList" :key="tet"
						style="margin-bottom:28rpx ;">
						<view class="card_bj" style="position: relative;" @click="tet.isOpenMember == '1'?goMember():''" >
							<image style="height:176rpx ;width: 100%;opacity: 0.47;"
								:src="tet.counponsGenre == 0 ? backImg.gimg : vipImg"></image>
							<view style="position: absolute;left: 0;top: 0;width: 100%;">
								<view style="width: 100%;margin: auto;overflow: hidden;">
									<!-- 满减卷 -->
									<view style="width:30% ;float: left;text-align: center;"
										v-if="tet.counponsType == 0">
										<view :style="{color: tet.counponsGenre == 0 ? '#fff' : '#F9D0A4' }"
											style="font-size:56rpx ;font-weight: bold;padding-top: 28rpx;">
											<text style="font-size: 28rpx;">￥</text>
											{{ tet.price }}
										</view>
										<view :style="{color: tet.counponsGenre == 0 ? '#fff' : '#F9D0A4' }"
											style="font-size:24rpx ;line-height: 48rpx;">满{{ tet.limitation }}元可用</view>
									</view>
									<!-- 折扣卷 -->
									<view style="width:30% ;float: left;text-align: center;" v-else>
										<view :style="{color: tet.counponsGenre == 0 ? '#fff' : '#F9D0A4' }"
											style="font-size:56rpx ;font-weight: bold;padding-top: 28rpx;">
											{{tet.fmtDiscountStr}}
										</view>
										<view :style="{color: tet.counponsGenre == 0 ? '#fff' : '#F9D0A4' }"
											style="font-size:24rpx ;line-height: 48rpx;">无门槛使用</view>
									</view>
									<!-- 已领取 -->
									<view style="width: 70%;float: right;">
										<view style="width: 93%;margin: auto;display: flex;">
											<view style="width: 90%;">
												<view class="card_text"
													:style="{color: tet.counponsGenre == 0 ? '#000000' : '#F9D0A4' }"
													style="opacity: 0.47;color: #000000;font-weight: bold; font-size:30rpx ;padding: 36rpx 16rpx 12rpx 20rpx;">
													{{tet.fmtName}}</view>
												<view class="card_text"
													:style="{color: tet.counponsGenre == 0 ? '#FF3A00' : '#FFFFFF' }"
													style=" font-size:22rpx ;padding: 0rpx 0rpx 0rpx 20rpx;line-height:48rpx;">
													本单不可使用原因
												</view>
												<view class="card_text"
													:style="{color: tet.counponsGenre == 0 ? '#979797' : '#F9D0A4' }"
													style="color: #000000;padding: 0rpx 0rpx 0rpx 20rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 22rpx;line-height: 34rpx;">
													{{tet.unserviceable[0]}}
												</view>
											</view>
											<!-- 区分会员优惠券判断是不是会员来显示去开通 -->
											<view v-if="tet.isOpenMember == '0'"
												:style="{color: tet.counponsGenre == 0 ? '#FF7D55' : '#FFFFFF' }"
												style=" text-align: center;width: 5%;margin-top: 30rpx;">去<br />使<br />用
											</view>
											<view v-else
												style=" text-align: center;width: 5%;margin-top: 30rpx;">
												去
												<br />
												开
												<br />
												通
											</view>
										</view>
									</view>

								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="text-align: center;margin: 100rpx;color:#DEDEDE;">没有更多了~</view>
				<!-- 	<view style="margin: 40rpx 0;background-color:#F5F5F5 ;">
					<u-divider color="#DEDEDE" half-width="120"  border-color="#DEDEDE">{{ prompt }}</u-divider>
				</view> -->
			</view>
		</mescroll-body>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				textStyle: {
					color: '#272755'
				},
				vipImg: "https://beedao.oss-cn-beijing.aliyuncs.com/c0c2db435e6e4a50bd024b97133fd290.png",
				xuanzhong: '',
				downOption: {
					use: true,
					auto: false,
					offset: 40
				},
				upOption: {
					use: false
				},
				backImg: {
					gimg: 'https://beedao.oss-cn-beijing.aliyuncs.com/aea18911a6d14cd3adf753ceb261a190.png',
					img: 'https://beedao.oss-cn-beijing.aliyuncs.com/d966eed886cc43a38845e04af918d0f8.png'
				}, //领取优惠卷背景图
				mescroll: null,
				prompt: '没有更多了',
				page: 1,
				list: '',

				comHeight: 0,
				businessId: '',
				enterpriseId: '',
				amountMoney: '',
				specificId: '',
				amount: 0,

			};
		},
		onLoad(option) {
			that = this;
			var menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const {
				top,
				width,
				height,
				right
			} = menuButtonInfo;
			uni.getSystemInfo({
				success: res => {
					const {
						statusBarHeight
					} = res;
					const margin = top - statusBarHeight;
					var navHeight = height + statusBarHeight + margin * 4;
					that.comHeight = res.windowHeight - navHeight + 'px';
					console.log(that.comHeight);
				}
			});

			this.specificId = option.specificId;
			this.businessId = option.businessId;
			this.enterpriseId = option.enterpriseId;
			this.amount = option.amount;
			this.enterpriseId = option.enterpriseId;
			this.amountMoney = option.amountMoney;
			this.needPay = option.needPay;
			that.getAvailableCoupons();
		},
		onShow() {},

		onReachBottom() {},
		methods: {
			user_sy(id) {
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.data1 = id; //修改上一页data里面的sh参数值为100
				prevPage.$vm.isRefresh = 1; //修改新预约页面
				if (prevPage.$vm.form) {
					prevPage.$vm.form.userCouponId = id.userCouponId; //修改新预约页面
				}
				uni.navigateBack({
					//uni.navigateTo跳转的返回，默认1为返回上一级
					delta: 1
				});
			},
			radioChange(id) {
				if (this.xuanzhong == id) {
					this.xuanzhong = '';
				} else {
					this.xuanzhong = id;
				}
			},
			// 去开通会员
			goMember() {
				uni.navigateTo({
					url: '/pageageA/member/meCenter'
				});
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			//优惠券
			getAvailableCoupons: function() {
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'coupon/getAvailableCoupons'
				};
				let data = {
					businessId: this.businessId,
					enterpriseId: this.enterpriseId,
					amountMoney: this.amountMoney,
					specificId: this.specificId,
					amount: this.amount,
				};
				this.http.httpTokenRequest(opts, data).then(res => {
					//打印请求返回的数据
					if (res.code == '200') {
						var array1 = res.data.disabledList;
						var array2 = res.data.availableList;
						if (array1.length > 0) {
							array1.forEach((item) => {
								item.endDatetime = item.endDatetime.substring(0, 10)
								item.startDatetime = item.startDatetime.substring(0, 10)
							})
						}
						if (array2.length > 0) {
							array2.forEach((items) => {
								items.endDatetime = items.endDatetime.substring(0, 10)
								items.startDatetime = items.startDatetime.substring(0, 10)
							})
						}
						this.list = {
							disabledList: array1,
							availableList: array2,
						};
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						});
					}
				});
			},
			// 下拉刷新回调函数
			downCallback() {
				console.log('下拉刷新');
				setTimeout(() => {
					(this.page = 1), (this.prompt = '加载中....');

					this.mescroll.endSuccess();
				}, 500);
			}
		}
	};
</script>

<style scoped>
	.cards_body {
		width: 100%;
		background-color: #f5f5f5;
		margin: auto;
	}

	.quan_title {
		width: 158rpx;
		height: 58rpx;
		background: linear-gradient(174deg, #feae24 0%, #ff2c00 100%);
		opacity: 1;
		border-radius: 20rpx 0px 20rpx 0px;
		font-size: 26rpx;
		color: white;
		text-align: center;
		line-height: 58rpx;
	}

	.css_mc {
		opacity: 0.5;
	}

	.card_text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #979797;
		font-size: 20rpx;
		line-height: 35rpx;
	}
</style>
